<template>
    <!-- 数据绑定 -->
    <span :endTime="endTime" :endText="endText">
        <slot>
            {{ content }}
        </slot>
    </span>
</template>
<script lang="ts">
import { Timer } from '@element-plus/icons-vue';
import { defineComponent } from 'vue';

// interface timeType{
//     hour:string|number
// }

export default defineComponent({
    name:"TimerL",
    data() {
        return {
            content: '',  
        }
    },
    //接收父级传过来的参数
    props: {
        // startTime:{
        //      type:String,
        //      defalut:'2022-9-21 21:02:59' //new Date()
        // },
        endTime: {
            type: String,
            default: '2022-10-21 21:02:59'
        },
        endText: {
            type: String,
            default: '已结束'
        },
    },
    methods:{
        // timestamp时间戳
        countdowm(timestamp:string) {
            // let self = this;
            // console.log(self);
            let timer = setInterval(() =>{
                let nowTime = new Date();
                let endTime = new Date(timestamp);
                let t = endTime.getTime() - nowTime.getTime();
                if (t > 0) {
                    let day = (Math.floor(t / 86400000));
                    let hour =( Math.floor((t / 3600000) % 24));
                    let min = Math.floor((t / 60000) % 60);
                    let sec = Math.floor((t / 1000) % 60);
                    //对时间进行格式化
                    hour = (hour < 10 ? "0" + hour : hour) as number;
                    min = (min < 10 ? "0" + min : min) as number;
                    sec = (sec < 10 ? "0" + sec : sec) as number;
                    let format = '';
                    if (day > 0) {
                        format = `${day}天${hour}小时${min}分${sec}秒`;
                    }
                    if (day <= 0 && hour > 0) {
                        format = `${hour}小时${min}分${sec}秒`;
                    }
                    if (day <= 0 && hour <= 0) {
                        format = `${min}分${sec}秒`;
                    }
                    this.content = format;
                } else {
                    //清除定时器
                    clearInterval(timer);
                    this.content = this.endText;
                }
            }, 1000);
        }
    },
    mounted() {
        // console.log(this.startTime)
        this.countdowm(this.endTime)
    },
}
)

</script>

<style lang="scss" scoped>

</style>